<template>
    <div style="width: 100%; height: 100%; box-sizing: border-box;" >
        <div ref="chart" style="width:100%;height: 100%; overflow: hidden"></div>
    </div>
</template>


<script>
import * as echarts from 'echarts'
import {heightConfig3, set_option_base_gradient_ramp} from "@/utils/loadPage";

// 柱状图
export default {
    name: 'MyBarGraph',
    data() {
        return {
            max_Height: heightConfig3(),
            form: {
                title: '近一周主动关怀',
                title_center:'center', // 标题位置,
                sort_field: 'time',
                x_name: '日期',
                y_name: '关怀数',
                x_key: 'time',
                y_key: 'count',
                y_suffix: '个',
                color:'#fff',
                x_color:'#B7BDBF',
                y_color:'#B3BCB9',
                x_line_color:'#008E72',
                y_line_color:'#008E72',
                title_color:'#fff',
                dataList: []
            },
        }
    },
    mounted() {
        this.handleResize();
        // 组件挂载时监听窗口大小变化事件，并设置定时器定时获取支付信息
        window.addEventListener('resize', this.handleResize);
        this.timer = setInterval(this.handleResize, 10000)
    },
    beforeDestroy() {
        // 组件销毁前移除窗口大小变化事件监听，销毁 ECharts 实例，并清除定时器和 sessionStorage
        window.removeEventListener('resize', this.handleResize);
        if (this.myChart) {
            this.myChart.dispose(); // 销毁 ECharts 实例
        }
        clearInterval(this.timer)
        sessionStorage.clear()
    },

    methods: {
        handleResize() {
            // 处理窗口大小变化事件，重新获取支付信息
            console.log('Window resized');
            this.max_Height = heightConfig3();
            this.get_data()
            this.set_option();
        },


        set_option() {
            // 设置图表选项，如果已有图表实例则销毁旧的，重新初始化并设置新选项
            if (this.myChart) {
                this.myChart.dispose(); // 销毁 ECharts 实例
            }
            this.myChart = echarts.init(this.$refs.chart) // 初始化 ECharts 实例
            let option = set_option_base_gradient_ramp(this, this.form)
            this.myChart.setOption(option) // 设置图表选项
        },

        get_data() {
            // 获取数据
            let daysArray = ['周一','周二','周三','周四','周五','周六','周日']; // 日期数组
            this.form.dataList = [];
            for (let i = 0; i < daysArray.length; i++) {
                let time = daysArray[i];
                let count = Math.floor(Math.random() * 500 + 10); // 生成 10 到 500 之间的随机总数
                this.form.dataList.push({time, count}); // 添加到数据源
            }
        }
    }

}


</script>
